<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>

<head>
    <title>用户中心</title>
    <!--CSS styles-->
    <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${path}/pet/user/css/main.css">
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/nav.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/linear-icons.css" />
    <!--JS files-->
    <script src="${path}/pet/home/js/jquery.min.js"></script>
    <script src="${path}/pet/user/js/bootstrap.min.js"></script>
    <script src="${path}/pet/home/js/nav.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/jquery-ui-1.11.0.css">
    <%--<script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>--%>
    <%--<link rel="stylesheet" href="https://www.jq22.com/jquery/jquery-ui-1.11.0.css">--%>
</head>

<body>
    <nav class="navbar-fixed">
        <div class="container">
            <div class="navigation navigation-main">
                <a href="" class="logo"><img src="${path}/pet/home/assets/images/logo.jpg" alt="" /></a>
                <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>
                <div class="floating-menu">
                    <div class="close-menu-wrapper">
                        <span class="close-menu"><i class="icon icon-cross"></i></span>
                    </div>
                    <ul style="max-width: 1000px;">
                        <li id="exitlogin1"><a>退出登录</a></li>
                        <li><a href="${path}/home">首页</a></li>
                        <li><a href="${path}/chat">社交<span id="badge"></span></a></li>
                        <li><a href="${path}/chat?role=kf">客服</a></li>
                        <li><a href="${path}/myOrders">订单</a></li>
                        <li><a href="${path}/myAccount">我的</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <section class="main-header" style="background-image:url(${path}/pet/home/assets/images/gallery-3.jpg)">
        <header>
            <div class="container">
                <h1 class="h2 title">宠物医疗保险</h1>
            </div>
        </header>
    </section>

    <%---------- 我的账户 ----------------------------------------------%>
    <div class="page-section mb-50">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <%-- 导航区 --%>
                        <div class="col-lg-3 col-12">
                            <ul class="myaccount-tab-menu nav nav-tabs" role="tablist">
                                <li><a id="dashboad_btn" href="#dashboad" class="active" data-toggle="tab">我的页面</a></li>
                                <li><a id="mypet_btn" href="#mypet" data-toggle="tab">我的宠物</a></li>
                                <li><a id="relation_btn" href="#relation" data-toggle="tab">关联人</a></li>
                                <li><a id="privilege_btn" href="#privilege" data-toggle="tab">会员中心</a></li>
                                <li><a id="associator_btn" href="#associator" data-toggle="tab">特权中心</a></li>
                                <li><a id="integral_btn" href="#integral" data-toggle="tab">积分中心</a></li>
                                <li><a id="collect_btn" href="#collect" data-toggle="tab">我的收藏</a></li>
                                <li><a id="history_btn" href="#history" data-toggle="tab">浏览历史</a></li>
                            </ul>
                        </div>
                    <!-- 面板区 -->
                    <div class="tab-content" id="myaccountContent">
                        <div role="tabpanel" class="tab-pane show active" id="dashboad"></div>
                        <div role="tabpanel" class="tab-pane show" id="mypet"></div>
                        <div role="tabpanel" class="tab-pane show" id="relation"></div>
                        <div role="tabpanel" class="tab-pane show" id="associator"></div>
                        <div role="tabpanel" class="tab-pane show" id="collect"></div>
                        <div role="tabpanel" class="tab-pane show" id="privilege"></div>
                        <div role="tabpanel" class="tab-pane show" id="history"></div>
                        <div role="tabpanel" class="tab-pane show" id="integral"></div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    $(document).ready(function(){
        var user="<%=session.getAttribute("user")%>";
        var uid = ${user.id};

        $("#exitlogin1").click(function(){
            var username = "${user.username}";
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录");
                    window.location.href = '${path}/home';
                }
            });
        });


        $.ajax({
            url: '/message/longSearch',
            data: {uid:uid},
            dataType:'json',
            type: 'POST',
            success: function (result) {
                var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                $("#badge").html(num);
            }
        });

        setInterval(function(){
            $.ajax({
                url: '/message/longSearch',
                data: {uid:uid},
                dataType:'json',
                type: 'POST',
                success: function (result) {
                    var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                    $("#badge").html(num);
                }
            });
        }, 5000);

        //判断是否是会员，显示会员页面
        $.ajax({
            type: 'POST',
            url: '/member/toPower',
            dataType: "json",
            data: {id:uid},
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result);
                if(result.action == "不是会员") {
                    $("#associator_btn").hide();
                    $("#associator").hide();
                }
            }
        });

        $('#dashboad').load('${path}/personalInfo');
        $("#dashboad_btn").click(function(){
            $('#dashboad').load('${path}/personalInfo');
        });
        $("#associator_btn").click(function(){
            $('#associator').load('${path}/associator');
        });
        $("#collect_btn").click(function(){
            $('#collect').load('${path}/collect');
        });
        $("#privilege_btn").click(function(){
            $('#privilege').load('${path}/privilege');
        });
        $("#relation_btn").click(function(){
            $('#relation').load('${path}/relation');
        });
        $("#mypet_btn").click(function(){
            $('#mypet').load('${path}/mypet');
        });
        $("#history_btn").click(function(){
            $('#history').load('${path}/history');
        });
        $("#integral_btn").click(function(){
            $('#integral').load('${path}/integral');
        });
    })
</script>

<style type="text/css">
    .show {
        /*overflow-x: auto;*/
        border: 1px solid #ebebeb;
    }

    .myaccount {
        overflow-y: auto;
        height: 500px;
        width: 815px;
    }
    body {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #8A8A8A;
        font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif, "宋体";
    }
    .row {
        /*width: 960px;*/
        width: 100%;
        /*margin:0 auto;*/
    }
    .ucenter {
        width: 780px;
        /*margin: 0 auto;*/
        text-align: left;
    }
    .ucenter-info {
        /* border: 1px solid #EBEBEB;*/
        padding: 10px;
    }
    .ucenter-info .info-title {
        text-align: center;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .ucenter .mt10 {
        margin-top: 10px;
    }
    .ucenter .info-title h5 {
        color: #3D608F;
        font-size: 20px;
        margin: 0;
    }
    .ucenter .info-img {
        width: 190px;
        text-align: center;
        float: left;
    }
    .ucenter .info-img li {
        line-height: 22px;
        list-style-type: none;
    }
    .ucenter .info-img li div {
        width: 92px;
        text-align: left;
        margin: 0 auto;
    }
    .ucenter .info-img .ico {
        width: 18px;
        height: 18px;
        position: relative;
        top: 5px;
        margin-right: 5px;
    }
    .ucenter .info-img .avatar {
        width: 132px;
        height: 132px;
    }
    .ucenter .info-main {
        float: left;
        width: 520px;
    }
    .ucenter .info-main .row {
        line-height: 28px;
        width: 520px;
    }
    .ucenter .info-main .row label {
        display: inline-block;
        margin-right: 10px;
        width: 60px;
    }
    .clear {
        clear: both;
    }
    /*==============我的宠物==================================================*/
    .changepet_btn {
        color: #8A8A8A;
        width: 100%;
        height: 30px;
        margin-left:38%;
    }
    .delete {
        height: 30px;
        margin-left: 8%;
    }
    #add_pet {
        color: #8A8A8A;
        width: 100%;
        height: 30px;
        margin-left:30%;
    }

    /*==============我的关联人==================================================*/
    .line {
        background: #efefef;
        width: 100%;
        height: 2px;
    }
    .info-title {
        border-bottom: 1px solid #EFEFEF;
    }
    .person_btn {
        margin-bottom: 10px;
        width: 20% !important;
        display: inline-block;
    }
    #addPerson {
        height: 30px;
        margin-left: 35%;
        width: 100%;
        color: #8A8A8A;
    }

    /*==============特权页面==================================================*/
    /*==============会员主页==================================================*/
    /*==============积分中心==================================================*/
    .glance {
        width: 100%;
        width:200px !important;
        height:150px !important;
    }
    .show1 {
        max-width: 200px;
        display: inline-block;
        width: 100%;
        overflow-x: auto;
    }
    @media screen and (max-width: 768px) {
        .show1 {
            max-width: 140px;
            display: inline-block;
            width: 100%;
            overflow-x: auto;
        }
    }
    @media screen and (max-width: 500px) {
        .show1 {
            max-width: 100px;
            display: inline-block;
            width: 100%;
            overflow-x: auto;
        }
    }
    /*==============我的收藏==================================================*/
    @media screen and (max-width: 1200px) {
        .change_btn {
            margin-right: 20%;
        }
    }
    @media screen and (max-width: 767px) {
        .change_btn {
            margin-right: 40%;
        }
    }
    @media screen and (max-width: 575px) {
        .change_btn {
            margin-right: 35%;
        }
    }
    .change_btn {
        width: 20%;
        float: right;
    }

    #badge {
        padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
        line-height: 20px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        /*position: relative;*/
        /*bottom: 45px;*/
        /*left: -20px;*/
    }
    /*==============浏览历史==================================================*/
</style>

</html>










